import React,{Component} from 'react'
import {message} from 'antd'
import * as pub from '../config/sharePublic';
import * as fetch from '../config/shareFetch';
import {getFile_IMGShar} from '../config/serverIp';
import '../style/less/appShare.less';

let href = window.location.href;
let urlToken = href.slice(href.indexOf('?'),href.length)

class Card extends Component {
	constructor(args) {
		super();
	}
	render(){
    let userCard=this.props.userCard;
		return(
                  <div data-tab-panel-0 className="am-tab-panel am-active tab">
                    <div className="am-panel user-info-list">
                      <div style={{borderBottom: '1px solid #E2EEFB'}}>
                        <div className="titlebar">
                          <h2 className="titlebar-title"><i className="fa fa-id-badge" />工作信息</h2>
                        </div>
                        <ul className="am-list am-list-static" style={{padding: '0 10px'}}>
                          <li><font><i className="fa fa-calendar" /></font>入职时间<span>{pub.formatTimestamp(userCard.entryTime,'y-m-d')}</span></li>
                          {/*<li><font><i className="fa fa-map-marker" /></font>所在地区<span>{userCard.address}</span></li>*/}
                          <li><font><i className="fa fa-user" /></font>职务<span>{userCard.jobName}</span></li>
                          <li><font><i className="fa fa-building" /></font>分公司<span>{userCard.branceOffice}</span></li>
                          {/*<li><font><i className="fa fa-flag" /></font>营业部<span>{userCard.departmentName}</span></li>*/}
                          {/*<li><font><i className="fa fa-group" /></font>营业组<span>{userCard.sellComName}</span></li>*/}
                        </ul>
                      </div>
                      <div className="panel-bd">
                        <div className="titlebar">
                          <h2 className="titlebar-title"><i className="fa fa-lightbulb-o" />个人说明</h2>
                        </div>
                        <div className="user-word">
                         {userCard.seifInformation !==undefined ? userCard.seifInformation:''}
                        </div>
                      </div>
                    </div>
                  </div>
			)
	}
}
class GrowingUp extends Component {
	constructor(args) {
		super();
    this.state={
      agentChangeList:[]
    }
	}
  //成长历程
	getAgentchangeList(){
		fetch.getAgentchangeApp(urlToken).then((data)=>{
			if(data.result==='RC100'){
				this.setState({
					agentChangeList:data.agentChangeList?data.agentChangeList:[]
				})
			}else{
				message.error(data.errMsg, 3);
			}
		}, (res) => {
			pub.reject(res);
		})
	}
  componentWillMount() {
		this.getAgentchangeList();
		
	}
	render(){
		return(
			     <div data-tab-panel-1 className="am-tab-panel am-active tab">
                    <div className="am-panel">
                      <div className="czjl">
                        <ul>
                          {
                            this.state.agentChangeList.map((item,index)=>{
                            return(
                              <li key={index}><span className="time">{item.changeDate?item.changeDate.substr(0,4)+'-'+item.changeDate.substr(4,2)+'-'+item.changeDate.substr(6,2):''}</span><span className="icon-czjl"></span>{item.gradeName}</li>
                              )
                              })
										      }
                        </ul>
                      </div>
                    </div>
                  </div>

			)
	}
}
class HonoraryCert extends Component {
	constructor(props) {
		super();
    this.state={
      HonorList:[],
      mdrt:'',
      star:'',
      channelId:'',
      Honor2List:[]
    }
	}
 allCertificateShare(){
		fetch.allCertificateShare(urlToken).then((data)=>{
			if (data.result === 'RC100') {
				this.setState({
					HonorList:data.mdreList?data.mdreList:[],
					mdrt:data.mdrt,
					star:data.star
				})
			}else{
				message.error(data.errMsg, 3);
			}
		}, (res) => {
			pub.reject(res);
    })
	}
  componentWillMount() {
    this.setState({
        Honor2List:this.props.Honor2List,
        channelId:this.props.channelId
    })
		this.allCertificateShare();
	}
	render(){
		return(
                  <div data-tab-panel-2 className="am-tab-panel am-active tab">
                    <div className="am-panel user-info-list">
                      <div style={{borderBottom: '1px solid #E2EEFB'}}>
                        <div className="titlebar">
                          <h2 className="titlebar-title"><i className="icon-ryzs" />荣誉证书</h2>
                        </div>
                        <div className="am-slider am-slider-carousel" id="img-slider">
                          <ul className="am-slides" style={{padding: '0 20px 10px'}}>
                            {
                                this.state.mdrt?
                                <li>
                                  <img src={require('../style/images/jiangZ-2.png')} alt='test'/>
                                  <p style={{width: '100%', textAlign: 'center'}}>{this.state.mdrt}</p>
                                </li>:null
                              }
                              {
                                this.state.star?
                                <li>
                                  <img src={require('../style/images/jiangZ-2.png')} alt='test'/>
                                  <p style={{width: '100%', textAlign: 'center'}}>{this.state.star}</p>
                                </li>:null
                              }
                              {this.state.HonorList.map((item,index)=>{
                                return(
                                  <li key={index}>
                                    <img src={require('../style/images/jiangZ-2.png')} alt='test'/>
                                    <p style={{width: '100%', textAlign: 'center'}}>{item.datecode}</p>
                                  </li>
                                  )
                              })}
                          </ul>
                        </div>
                      </div>
                      <div className="panel-bd">
                        <div className="titlebar">
                          <h2 className="titlebar-title"><i className="icon-fxry" />{this.state.channelId==='4'?'星行荣誉':'蜂行荣誉'}</h2>
                        </div>
                        <div className="am-slider am-slider-carousel" id="img-slider-1">
                          <ul className="am-slides" style={{padding: '0 20px 10px'}}>
                            {this.state.Honor2List.map((item, index) => {
                              return (
                                <div key={index} style={{width:'100px',float:'left',marginLeft:'5px'}} className={item.isHave===1?'':'demo'}>
                                    <img src={getFile_IMGShar+'?headPath='+item.honorBadge} alt='test'/>
                                    <p style={{width: '100%', textAlign: 'center'}}>{item.honorName}</p>
                                </div>
                              )
                            })}
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
			)
	}
}
class AppShare extends Component {
	constructor(props) {
		super();
		this.state = {
			tab : 1,
      userCard:{},
			Honor2List:[],
      sumOperation:'',
      channelId:'',
		}
	}
  show(){
		pub.loading(this, true);
		fetch.myHomeApp(urlToken).then((data)=>{
			if (data.result === 'RC100') {
				this.setState({
					userCard:data.user,
          channelId:data.user.channelId
				})
			}else{
				message.error(data.errMsg, 3);
			}
			pub.loading(this, false);
		}, (res) => {
			pub.loading(this, false);
			pub.reject(res);
    })
	}
  myHonor() {
		pub.loading(this, true);
		fetch.myHonorApp(urlToken).then((data) => {
			if (data.result === 'RC100') {
				this.setState({
					Honor2List: data.allHonor ? data.allHonor : [],
				})
			} else {
				message.error(data.errMsg, 3);
			}
			pub.loading(this, false);
		}, (res) => {
			pub.loading(this, false);
			pub.reject(res);
		})
	}
  sumOperation() {
		pub.loading(this, true);
		fetch.sumOperation(urlToken).then((data) => {
			if (data.result === 'RC100') {
				this.setState({
				  sumOperation:data.sumOperation?data.sumOperation:0
				})
			} else {
				message.error(data.errMsg, 3);
			}
			pub.loading(this, false);
		}, (res) => {
			pub.loading(this, false);
			pub.reject(res);
		})
	}
  opcardIslike() {
		pub.loading(this, true);
		fetch.opcardIslike(urlToken).then((data) => {
			if (data.result === 'RC100') {
        this.sumOperation();
			} else {
				message.error(data.errMsg, 3);
			}
			pub.loading(this, false);
		}, (res) => {
			pub.loading(this, false);
			pub.reject(res);
		})
	}
  componentWillMount() {
    this.sumOperation();
		this.show();
		this.myHonor();
	}
	render(){
    let userCard=this.state.userCard;
		return(
            <div className="container-share" >
              <div className="border-bg border-bg-1" />
              <div className="border-bg border-bg-2" />
              <div className="border-bg border-bg-3" />
              <div className="border-bg border-bg-4" />
              <div className="border-bg border-bg-5" />
              <div className="border-bg border-bg-6" />
              <div className="am-panel user-header-1">
                <img src={getFile_IMGShar+'?headPath='+userCard.headPath} onError={(e) => pub.headImageError(e)} alt='head' />
                <div className="right-info">
                  <h1>{userCard.userRealName}</h1>
                  <p className="phone-mail"><i className="fa fa-phone" /><label>手机号</label>{userCard.phone}</p>
                  <p className="phone-mail"><i className="fa fa-envelope" /><label>邮箱</label>{userCard.email}</p>
                </div>
                 <div className="thumbs-up">
					        <p>已收到点赞<span>{this.state.sumOperation}</span></p>
				        	<div onClick={()=>{this.opcardIslike()}} className="click-thumbs-up"></div>
			        	 </div>
              </div>
              <div data-am-widget="tabs" className="am-tabs am-tabs-default">
                <ul className="am-tabs-nav am-cf nav tab-nav">
                  <li className={this.state.tab===1?"am-active":""} onClick={()=>{this.setState({tab:1})}} >
                    <div className="icon-box"><img src={require('../style/images/icon-grzl.png')} alt="test"/></div>
                    <a>个人名称</a>
                  </li>
                  <li className={this.state.tab===2?"am-active":""} onClick={()=>{this.setState({tab:2})}} >
                    <div className="icon-box"><img src={require('../style/images/icon-czjl.png')} alt="test"/></div>
                    <a>成长经历</a>
                  </li>
                  <li className={this.state.tab===3?"am-active":""} onClick={()=>{this.setState({tab:3})}} >
                    <div className="icon-box"><img src={require('../style/images/icon-ryzs.png')} alt="test"/></div>
                    <a>荣誉证书</a>
                  </li>
                </ul>
                <div className="am-tabs-bd">
                    {this.state.tab === 1?<Card userCard={this.state.userCard} jobInfo={this.state.jobInfo}/>:null}
                    {this.state.tab === 2?<GrowingUp />:null}
                    {this.state.tab === 3?<HonoraryCert Honor2List={this.state.Honor2List} channelId={this.state.channelId}/>:null}

                </div>
              </div>
            </div>

			)
	}
}
export default AppShare;